<template> 
    <div class='goodsFoot height2_45 lineHeight2_45 whiteBoderTop whiteBackgroundfff fixed zIndex widthPer100 bottom0'>   
        <!-- 如果有值库存就正常默认的类，没有库存就加上disabled这个类 -->
        <div v-if='productInfoData' class='overflowHidden height2_45' v-bind:class="{disabled: !productInfoData.stockNum}">
            <p class='none height1_5 lineHeight1_5 white fontSize0_65 grayBackground303030' v-bind:class='{bottom2_45:!productInfoData.stockNum,textCenter:!productInfoData.stockNum,block:!productInfoData.stockNum,fixed:!productInfoData.stockNum,widthPer100:!productInfoData.stockNum}'>{{$t("soldOut")}}</p>
            <div style="background-color: #fff;" class="widthPer33_33 floatLeft inlineBlock textCenter">
                <div class="goods_bottom_btn">
                    <p class='relative white height2_45 lineHeight2_45 fontSize0_65'>
                        <b class='gray919191 fontSize0_65 inlineBlock paddingTop0_7'>{{$t("home")}}</b>
                        <span class='absolute marginLeftPer-7 top-0_25 leftPer50'>
                            <i class="iconfont fontSize0_9 icons gray242424">&#xe622;</i>
                        </span>
                    </p>
                </div>
            </div>
            <div class="goods_bottom_btn widthPer33_33 floatLeft inlineBlock textCenter">
                <p class='relative white height2_45 lineHeight2_45 fontSize0_65'>
                    <b class='gray919191 fontSize0_65 inlineBlock paddingTop0_7'>{{$t("cart")}}</b>
                    <span class='absolute marginLeftPer-7 top-0_25 leftPer50'>
                        <i class="iconfont icons fontSize0_9 gray242424">&#xe616;</i>
                        <em class='black absolute fontSize0_65 fontNormal marginLeftPer-18 top0_1 leftPer50'>0</em>
                    </span>
                </p>
            </div>
            <!-- 如果date.stockNum有值，就执行里面的代码，如果没有值，就输出已卖完 -->
            <div class='inlineBlock textCenter height2_45 redBackgroundf8584f floatLeft widthPer33_33' v-bind:class='{disabled:!productInfoData.stockNum,grayBackgroundA2A2A2:!productInfoData.stockNum}'>
                <p class='white height2_45 lineHeight2_45 fontSize0_65' v-on:click='openPopup(productInfoData)'><span class="buy_now_btn height2_45 lineHeight2_45 fontSize0_7 verticalTop">{{$t("goodsAddCart")}}</span></p>
            </div>
        </div>
    </div>
</template>

<script>
import '../../../style/normalize.css'
import '../../../style/base.css'
import './css/goods.scss'
export default {
    components: {

    },    
    props: {
        // 从父组件传递过来的数据
        productInfoData: {
            default: function() {
                return []
            }
        }      
    },   
    methods: {
        // 开启弹窗
        openPopup(productInfoData) {
            // 如果有库存
            if (productInfoData.stockNum) {
                this.$emit('setPopupState')
            } 
        }
    }   
}
</script>
